<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="UTF-8">
    <title>登录功能演示</title>
    <script src="https://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
</head>
<body>

<fieldset>
    <legend>登录状态</legend>
    <div>
        <div>id: <span id="span_userId" th:text="${userId}"></span></div>
        <div>用户名:<span id="span_userName" th:text="${userName}"></span></div>
        <div style="word-break: break-all">AccessToken:<span id="token" th:text="${accessToken}"></span></div>

        <button id="logout" onclick="logout()">注销会话</button>
    </div>
</fieldset>

<fieldset>
    <legend>用户名密码登录</legend>
    <div>
        <label for="username">用户名:</label>
        <input name="username">

        <label for="username">密码:</label>
        <input name="password">

        <button onclick="passwordLogin()">登录</button>

    </div>
</fieldset>


<fieldset>
    <legend>用户名密码登录</legend>
    <div>
        <labe>用户名:</labe>
        <input name="username4"/>

        <label>密码:</label>
        <input name="password4"/>

        <label>验证码:</label>
        <img id="veryImg"/>
        <input name="veryCode" style="width: 90px">
        <input id="veryCodeID" type="hidden">

        <button onclick="passwordLogin4()">登录</button>

    </div>
</fieldset>

<fieldset>
    <legend>短信验证码登录</legend>
    <div>
        <labe>手机号码:</labe>
        <input type="text" id="phone">

        <button onclick="sendCode()">发送验证码</button>

        <label>验证码:</label>
        <input type="text" id="code">

        <button id="login" onClick="phoneLogin()">登录</button>

    </div>
</fieldset>

<fieldset>
    <legend>TOTP登录验证(如：谷歌认证器，微软认证器等基于时间算法的验证码)</legend>
    <div>
        <label>用户名:</label>
        <input name="userNameTotp">

        <label>密码:</label>
        <input name="passWordTotp">

        <label>验证码:</label>
        <input type="text" name="codeTotp">

        <button onclick="passwordLoginTotp()">登录</button>

        <button onclick="passwordLoginTotp(1)">第一次?请先绑定密钥</button>

    </div>
</fieldset>

<fieldset>
    <legend>GITEE登录</legend>
    <div style="word-break: break-all">
        clientId: <span th:text="${gitee.clientId}"></span> <br/>
        跳转地址: <span id="giteeUrl" th:text="${giteeurl}"></span> <br/>
        <button onClick="gotoGitee()">跳转登录</button>
    </div>
</fieldset>

<fieldset>
    <legend>GITHUB登录</legend>
    <div>
        跳转地址: <span id="githubUrl" th:text="${githubUrl}"></span> <br/>
        <button onClick="gotoGithub()">跳转登录</button>
    </div>
</fieldset>

<fieldset>
    <legend>微信登录</legend>
    <div>
        <button>跳转登录</button>
    </div>
</fieldset>

<fieldset>
    <legend>获取账号信息</legend>
    <div>
        <button onclick="getUserinfo()">获取账号信息</button>
    </div>
</fieldset>


</body>

<script>
    function gotoGitee() {
        let url = $("#giteeUrl").text();
        window.location.href = url;
    }

    function gotoGithub() {
        let url = $("#githubUrl").text();
        window.location.href = url;
    }

    // 使用 Access-Token 置换资源: 获取账号昵称、头像、性别等信息
    function getUserinfo() {
        var accessToken = $("#token").text();
        if (accessToken == '') {
            return layer.alert('您还没有获取 Access-Token ，请先授权登录');
        }
        $.ajax({
            url: '/getUserinfo',
            data: {accessToken: accessToken},
            dataType: 'json',
            success: function (res) {
                if (res.code == 200) {
                    layer.alert(JSON.stringify(res.data));
                } else {
                    layer.alert(res.msg);
                }
            },
            error: function (xhr, type, errorThrown) {
                return layer.alert("异常：" + JSON.stringify(xhr));
            }
        });
    }

    // 模式三：密码式-授权登录
    function passwordLogin() {
        $.ajax({
            url: '/passwordLogin',
            data: {
                username: $('[name=username]').val(),
                password: $('[name=password]').val()
            },
            dataType: 'json',
            success: function (res) {
                console.log('返回：', res);
                if (res.code == 200) {
                    layer.msg('登录成功！');
                    setInfo(res.data);
                } else {
                    layer.msg(res.msg);
                }
            },
            error: function (xhr, type, errorThrown) {
                return layer.alert("异常：" + JSON.stringify(xhr));
            }
        });
    }

    // 模式三：密码式-授权登录
    function passwordLogin4() {
        $.ajax({
            url: '/passwordLogin',
            data: {
                username: $('[name=username4]').val(),
                password: $('[name=password4]').val(),
                code: $('[name=veryCode]').val(),
                codeId: $('#veryCodeID').val()
            },
            dataType: 'json',
            success: function (res) {
                console.log('返回：', res);
                if (res.code == 200) {
                    loadImg();
                    layer.msg('登录成功！');
                    setInfo(res.data);
                } else {
                    loadImg();
                    layer.msg(res.msg);
                }
            },
            error: function (xhr, type, errorThrown) {
                loadImg();
                return layer.alert("异常：" + JSON.stringify(xhr));
            }
        });
    }


        // 写入数据
    function setInfo(info) {
        console.log('info', info);
        $("#token").text(info["access_token"]);
        $("#span_userId").text(info["uid"]);
    }


    // 注销
    function logout() {
        $.ajax({
            url: '/logout-self',
            dataType: 'json',
            success: function (res) {
                location.href = '/';
            },
            error: function (xhr, type, errorThrown) {
                return layer.alert("异常：" + JSON.stringify(xhr));
            }
        });
    }

    function sendCode() {
        var phone = $("#phone").val();
        if (phone == '') {
            return layer.alert('请输入手机号码');
        }
        $.ajax({
            url: '/send-phone-code',
            data: {phone: phone},
            dataType: 'json',
            success: function (res) {
                if (res.code == 200) {
                    layer.alert('验证码已发送');
                } else {
                    layer.alert(res.msg);
                }
            }
        });

    }

    function phoneLogin() {
        var phone = $("#phone").val();
        var code = $("#code").val();

        if (phone == '' || code == '') {
            return layer.alert('请输入手机号码和验证码');
        }

        $.ajax({
            url: '/phone-code-login',
            data: {phone: phone, code: code},
            dataType: 'json',
            success: function (res) {
                if (res.code == 200) {
                    layer.alert('登录成功');
                    setInfo(res.data);
                } else {
                    layer.alert(res.msg);
                }
            }
        });
    }


    // Totp登录
    function passwordLoginTotp(bind) {
        $.ajax({
            url: '/totp-login?bind=' + bind,
            data: {
                username: $('[name=userNameTotp]').val(),
                password: $('[name=passWordTotp]').val(),
                code: $('[name=codeTotp]').val()
            },
            dataType: 'json',
            success: function (res) {
                console.log('返回：', res);
                if (res.code == 200) {
                    layer.msg('登录成功！');
                    setInfo(res.data);
                } else if (res.code == 201) {
                    layer.open({
                        type: 1,
                        content: "请用谷验认证器等记下此二维码,此二维码信息不要泄露<br/><img src='" + res.data + "'>"
                    });
                } else {
                    layer.alert(res.msg);
                }
            },
            error: function (xhr, type, errorThrown) {
                return layer.alert("异常：" + JSON.stringify(xhr));
            }
        });
    }

    function loadImg() {
        $.ajax({
            url: '/captcha',
            dataType: 'json',
            success: function (res) {
                console.log('返回：', res);
                if (res.code == 200) {
                    $("#veryImg").attr("src", res.data.base64);
                    $("#veryCodeID").val(res.data.id)
                }
            },
            error: function (xhr, type, errorThrown) {
                return layer.alert("异常：" + JSON.stringify(xhr));
            }
        });
    }

    window.onload = function () {
        $('#veryImg').click(function() {
            loadImg();
        });
        loadImg();
    }

</script>

<style>
    fieldset {
        border-style: solid;
        border-width: 1px;
        border-color: #7a7a7a;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        line-height: 30px;
        list-style: none;
        margin-left: 10px;
        margin-right: 10px;
    }

    fieldset legend {

        color: #302A2A;
        font: bold 14px Verdana, Geneva, sans-serif;
        font-weight: bold;
        text-align: left;
    }
</style>
</html>